import React, { useEffect } from "react";
import { Modal, Form, Input, message, Button, Select } from "antd";
const { Option } = Select;

interface ListWarehousesModalValues {
  product_id: number;
  //  @int32
  warehouse_id: number;
  // 1-入库 2-出库 @int32
  operation_type: number;
  // 数量 @int32
  quantity: number;
}

const operation_types = [
  {
    label: "入库",
    value: 1,
  },
  {
    label: "出库",
    value: 2,
  },
];

interface SupplierModalProps {
  title: string;
  visible: boolean;
  onCancel: () => void;
  onOk: (values: any) => void;
  defaultValue?: any;
  productList: any[];
  warehouses: any[];
}

const ListWarehouseRecordsModal: React.FC<SupplierModalProps> = ({
  title,
  visible,
  onCancel,
  onOk,
  defaultValue,
  productList = [],
  warehouses = [],
}) => {
  const [form] = Form.useForm<ListWarehousesModalValues>();

  const handleOk = async () => {
    try {
      const values = await form.validateFields();
      onOk(values);
      form.resetFields();
    } catch (errorInfo) {
      console.log("Failed:", errorInfo);
    }
  };

  useEffect(() => {
    if (Object.keys(defaultValue).length === 0) {
      form.resetFields();
    } else {
      form.setFieldsValue({
        ...defaultValue,
      });
    }
  }, [defaultValue, visible]);

  return (
    <Modal
      title={title}
      visible={visible}
      onOk={handleOk}
      onCancel={onCancel}
      footer={[
        <Button key="cancel" onClick={onCancel}>
          取消
        </Button>,
        <Button key="ok" type="primary" onClick={handleOk}>
          确定
        </Button>,
      ]}
    >
      <Form form={form}>
        <Form.Item
          label="选择产品"
          name="product_id"
          rules={[
            {
              required: true,
              message: "请选择产品",
            },
          ]}
        >
          <Select placeholder="请选择产品">
            {productList.map((product) => (
              <Option key={product.id} value={product.id}>
                {product.product_name}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="仓库"
          name="warehouse_id"
          rules={[
            {
              required: true,
              message: "请选择",
            },
          ]}
        >
          <Select placeholder="请选择">
            {warehouses.map((product) => (
              <Option key={product.id} value={product.id}>
                {product.warehouse_name}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="操作类型"
          name="operation_type"
          rules={[
            {
              required: true,
              message: "请选择",
            },
          ]}
        >
          <Select placeholder="请选择">
            {operation_types.map((product) => (
              <Option key={product.value} value={product.value}>
                {product.label}
              </Option>
            ))}
          </Select>
        </Form.Item>
        <Form.Item
          label="数量"
          name="quantity"
          rules={[
            {
              required: false,
              message: "请输入",
            },
          ]}
          validateTrigger="onBlur"
        >
          <Input type="number" placeholder="请输入" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ListWarehouseRecordsModal;
